<template>
  <ve-pie :loading="loading" :data="chartData" :data-empty="dataEmpty" :settings="chartSettings" :colors="colors" :legend="legend" />
</template>

<script>
import VePie from 'v-charts/lib/pie.common';
import 'v-charts/lib/style.css';
export default {
  components: {
    VePie
  },
  props: {
    rows: {
      type: Array,
      default: () => {
        return [];
      }
    },
    loading: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      dataEmpty: true,
      chartSettings: {
        labelMap: {
          from_text: '用户下单渠道',
          tp_count: '下单人数'
        }
      },
      legend: {
        right: 20,
        orient: 'vertical',
        y: 'center'
      },
      chartData: {
        columns: ['from_text', 'tp_count'],
        rows: [...this.rows]
      },
      colors: ['#78A9FF', '#FF7C7C', '#FFBA64', '#B279FF', '#62D674']
    };
  },
  watch: {
    rows: {
      handler(rows) {
        this.chartData.rows = rows;
        if (rows.length == 0) {
          this.dataEmpty = true;
        } else {
          this.dataEmpty = false;
        }
      }
    }
  }
};
</script>

<style></style>
